<template>
    <transition name="fade">
        <div class="add-song" v-show="isShow" @click.stop>
            <div class="header">
                <h1 class="title">添加歌曲到列表</h1>
                <div class="close" @click="hide">
                    <i class="icon-close"></i>
                </div>
            </div>
            <div class="search-box-wrapper">
                <SearchBox
                        placeholder="搜索歌曲"
                        ref="searchBox"
                        @setKeyword="setKeyword"
                        :keyword="keyword"
                ></SearchBox>
            </div>
            <div class="switches" v-show="!keyword">
                <Switches :currentIndex="currentIndex" :switches="switches" @changeSwitch="changeSwitch"></Switches>
            </div>
            <div class="list-wrapper" v-show="!keyword">
                <Scroll ref="songList" class="recent-songs" v-if="currentIndex === 0" :datalength="playHistory.length">
                    <SongList :songs="playHistory" @selectItem="selectSongItem"></SongList>
                </Scroll>
                <Scroll ref="searchList" class="recent-searches"  v-if="currentIndex === 1" :datalength="searchHistory.length">
                    <ListHistory :list="searchHistory" @selectItem="setKeyword" @deleteItem="deleteItem"></ListHistory>
                </Scroll>
            </div>
            <div class="search-result" v-show="keyword">
                <SearchList :showSinger="false" :query="keyword" @scrollWillStart='blur'>
                </SearchList>
            </div>
            <Tooltip ref="tooltip" text="1首歌曲已经添加到播放列表"></Tooltip>
        </div>
    </transition>
</template>
<script>
    import { mapGetters, mapActions } from 'vuex';
    import { searchMixin } from '@/common/js/mixin';
    import SearchBox from '@/base/search-box';
    import Scroll from '@/base/scroll';
    import SongList from '@/base/song-list';
    import Switches from '@/base/switches';
    import ListHistory from '@/base/list-history';
    import Tooltip from '@/base/tooltip';
    import { Song } from '@/common/js/song';
    import { deleteSearchItem } from '@/common/js/cache';
    import SearchList from '../search-list/search-list';

    export default {
        mixins: [searchMixin],
        name: 'add-song',
        data() {
            return {
                isShow: false,
                currentIndex: 0,
                keyword: '',
            };
        },
        methods: {
            show() {
                this.isShow = true;
                this.$refs.songList && this.$refs.songList.refresh();
            },
            hide() {
                this.isShow = false;
            },
            changeSwitch(index) {
                this.currentIndex = index;
            },
            selectSongItem({ song }) {
                // ls本地存储不能保存方法！！！
                this.$refs.tooltip.show();
                this.insertSong(new Song(song));
            },
            deleteItem(text) {
                // 删除vuex中的state和ls
                this.SET_SEARCH_HISTORY(deleteSearchItem(text));
            },
//            selectSearchItem(item) {
//                this.$refs.searchBox.setSearchKey(item);
//            },
            ...mapActions(['insertSong']),
        },
        computed: {
            ...mapGetters(['playHistory', 'searchHistory']),
        },
        created() {
            this.switches = [
                {
                    label: '最近播放',
                },
                {
                    label: '搜索历史',
                },
            ];
        },
        components: {
            SearchBox,
            SongList,
            Switches,
            ListHistory,
            Scroll,
            SearchList,
            Tooltip,
        },
    };
</script>
<style lang="stylus" scoped>
    @import '~styl/var';
    @import '~styl/mixin';

    .add-song
        &.fade-enter-active, &.fade-leave-active
            transition transform .5s
        &.fade-enter, &.fade-leave-to
            transform translate3d(100%, 0, 0);
        wrapper(fixed, 200)
        background $color-background
        .header
            position relative
            line-height 44px
            text-align center
            .title
                font-size $font-size-large
                color $color-text
            .close
                position absolute
                right 8px
                top 0
                .icon-close
                    display block
                    padding 12px
                    font-size 20px
                    color $color-theme
        .search-box-wrapper
            margin 20px
        .switches
            width 240px
            margin 0 auto
        .list-wrapper
            position absolute
            top 165px
            bottom 0
            width 100%
            .recent-songs
                height 100%
                overflow hidden
            .recent-searches
                padding 20px 30px
        .search-result
            height 100vh
            overflow hidden
            padding 0 30px
</style>
